<template>
	<view class="container">
		<view v-show="login">
			<view v-if="dataList.length!=0">
				<!-- #ifdef MP || H5-->
				<view class="tui-edit-goods">
					<view>购物车共<text class="tui-goods-num">{{dataList.length}}</text>件商品</view>
					<view>
						<tui-button type="gray" :plain="true" shape="circle" width="160rpx" height="60rpx" :size="24" @click="editGoods">{{isEdit?"完成":"编辑商品"}}</tui-button>
					</view>
				</view>
				<!-- #endif -->
				<checkbox-group @change="buyChange">
					<view class="tui-cart-cell  tui-mtop" v-for="(item,index) in dataList" :key="index">
						<tui-swipe-action :actions="actions" @click="handlerButton" :params="item" :forbid="true">
							<template v-slot:content>
								<view class="tui-goods-item">
									<label class="tui-checkbox">
										<checkbox :value="item.id" :checked="item.selected" color="#fff"></checkbox>
									</label>
									<image :src="item.productPic" class="tui-goods-img" />
									<view class="tui-goods-info">
										<view class="tui-goods-title">
											{{item.productSubTitle}}
										</view>
										<view class="tui-goods-model">
											<view class="tui-model-text"><text v-for="(attr,j) in item.productAttrArray" :key="j">{{attr.value}}{{item.productAttrArray.length-1>j?',':''}}</text></view>
										</view>
										<view class="tui-price-box">
											<view class="tui-goods-price">￥{{item.price | getPrice}}</view>
											<tui-numberbox :value="item.quantity" :height="50" :width="64" :min="1" :index="index" @change="changeNum"></tui-numberbox>

										</view>
									</view>
								</view>
							</template>
						</tui-swipe-action>
					</view>
				</checkbox-group>
				
				<!--商品暂无-->
				<view class="tui-cart-cell  tui-mtop" v-if="invalidList.length!=0">
					<view class="tui-activity">
						<view class="tui-bold">暂无商品</view>
						<view class="tui-buy">
							<tui-button type="gray" :plain="true" shape="circle" width="200rpx" height="56rpx" :size="24" @click="empty()">清空暂无商品</tui-button>
						</view>
					</view>
					<view :class="{'tui-invalid-ptop':index!==0}" v-for="(item,index) in invalidList" :key="index">
						<tui-swipe-action :actions="actions2" :forbid="true">
							<template v-slot:content>
								<view class="tui-goods-item">
									<view class="tui-checkbox tui-invalid-pr">
										<view class="tui-invalid-text">暂无</view>
									</view>
									<image :src="item.productPic" class="tui-goods-img" />
									<view class="tui-goods-info">
										<view class="tui-goods-title tui-gray">
											{{item.productSubTitle}}
										</view>
										<view class="tui-price-box tui-flex-center">
											<view class="tui-goods-invalid">产品暂无</view>
											<view class="tui-btn-alike">
												<tui-button type="white" :plain="true" shape="circle" width="120rpx" height="48rpx" :size="24">找相似</tui-button>
											</view>
										</view>
									</view>
								</view>
							</template>
						</tui-swipe-action>
					</view>
				</view>
				
				<!--tabbar-->
				<view class="tui-tabbar">
					<view class="tui-checkAll">
						<checkbox-group @change="checkAll">
							<label class="tui-checkbox">
								<checkbox :checked="isAll" color="#fff"></checkbox>
								<text class="tui-checkbox-pl">全选</text>
							</label>
						</checkbox-group>
						<view class="tui-total-price" v-if="!isEdit">合计:<text class="tui-bold">￥{{totalPrice | getPrice}}</text> </view>
					</view>
					<view>
						<tui-button width="200rpx" height="70rpx" :size="30" type="danger" shape="circle" v-if="!isEdit" @click="btnPay">去结算({{quantity}})</tui-button>
						<tui-button width="200rpx" height="70rpx" :size="30" type="danger" shape="circle" :plain="true" v-else @click="delCart()">删除</tui-button>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
			</view>
			<view v-if="dataList.length==0" class="login">
				<u-empty text="暂无数据" mode="car"></u-empty>

			</view>
		</view>
		<view v-show="!login" class="login">
			<u-empty text="请登录" mode="permission"></u-empty>
		</view>
		<tabbar />
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!-- 模态框 --> 
		<u-modal v-model="del_show" content="是否清空" @confirm="del_shows()" :show-cancel-button="true"> </u-modal>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		
		<failTimeout v-show="failTimeout" :tabbar="true"></failTimeout>
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar.vue'
	import OmsCartItemController from '../../api/OmsCartItemController.js'
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				failTimeout:false,
				dataList: [
					// 	{
					// 	id: "t2020003120",
					// 	quantity: 2,
					// 	price: 299.5,
					// 	selected: false
					// },
				],
				isAll: false,
				totalPrice: 0,
				quantity: 0,
				cartIds: [], //购物车id
				actions: [{
						name: '收藏',
						width: 64,
						color: '#fff',
						fontsize: 28,
						background: '#FFC600'
					},
					{
						name: '看相似',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#FF7035'
					},
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				actions2: [{
						name: '看相似',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#FF7035'
					},
					{
						name: '删除',
						color: '#fff',
						fontsize: 28,
						width: 64,
						background: '#F82400'
					}
				],
				isEdit: false,

				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				login: true,
				invalidList:[],		//无效的购物车商品
				del_show:false,
			}
		},
		onLoad() {
			this.failTimeout=false
		},
		async onShow() {
			this.dataList = [];
			await this.list();
			this.isAll = false;
		},
		filters: {
			getPrice(price) {
				price = price || 0;
				return price.toFixed(2)
			}
		},
		methods: {
			async list() {
				this.invalidList=[];
				await OmsCartItemController.list().then(res => {
					if (res.data.code == 200) {
						res.data.data.forEach(e => {
							e.selected = false;
							e.productAttrArray = JSON.parse(e.productAttr)
							if(e.pmsSkuStock.stock<=0){
								this.invalidList.push(e)
							}else{
								this.dataList.push(e)
							}
						})
						this.login = true;

					} else if (res.data.code == 401) {
						this.login = false;
					}
				}).catch(err => {
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
			},
			calcHandle() {
				let quantity = 0;
				let totalPrice = 0;
				let selectedNum = 0;
				this.dataList.map((item) => {
					if (item.selected) {
						quantity += item.quantity;
						totalPrice += item.price * item.quantity;
						selectedNum++
					}
				})
				this.isAll = selectedNum === this.dataList.length

				this.quantity = quantity
				this.totalPrice = totalPrice
			},
			async changeNum(e) {
				await OmsCartItemController.quantity(this.dataList[e.index].id,e.value).then(res=>{
					if(res.data.code==200){
						this.dataList[e.index].quantity = e.value
					}
				}).catch(err=>{
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			handlerButton: function(e) {
				let index = e.index;
				let item = e.item;
				this.tui.toast(`商品id：${item.id}，按钮index：${index}`);
			},
			editGoods: function() {
				// #ifdef H5 || MP
				this.isEdit = !this.isEdit;
				// #endif
			},
			detail: function() {
				uni.navigateTo({
					url: '../productDetail/productDetail'
				})
			},
			btnPay() {		//提交结算
				let array = [];	
				this.dataList.map(item => {
					if (item.selected) {
						array.push(item.id)
					}
				})
				if(array.length!=0){
					uni.navigateTo({
						url: '../submitOrder/submitOrder?cartIds='+array.toString()
					})
				}else{
					this.$refs.toast.show({
						title: "请选择商品",
						imgUrl: "/static/img/toast/info-circle.png",
						icon: true
					})
				}
				
			},
			buyChange(e) {
				this.cartIds = e.detail.value;
				this.dataList.map(item => {
					//如果购物车id为数字统一转成字符串
					if (~this.cartIds.indexOf(item.id.toString())) {
						item.selected = true;
					} else {
						item.selected = false;
					}
				})
				setTimeout(() => {
					this.calcHandle()
				}, 0)
			},
			checkAll(e) {
				this.isAll = !this.isAll;
				let quantity = 0;
				let totalPrice = 0;
				this.dataList.map((item) => {
					item.selected = this.isAll;
					if (this.isAll) {
						quantity += item.quantity;
						totalPrice += item.price * item.quantity;
					}
				})
				this.totalPrice = totalPrice;
				this.quantity = quantity;
			},
			async delCart() {		//删除商品
				let array = [];
				this.dataList.map(item => {
					if (item.selected) {
						array.push(item.id)
					}
				})
				if (array.length != 0) {
					await OmsCartItemController.delete(array).then(res => {
						if (res.data.code == 200) {
							this.dataList = [];
							
							this.isAll = false;
							this.calcHandle()
						}
					}).catch(err => {
						console.log(err)
					})
					if (this.dataList.length == 0) {
						await this.list();
					}
				}
			},
			empty(){			//清空暂无商品
				
				this.del_show=true;
			},
			async del_shows(){		
				let arr=[]
				this.invalidList.map(e=>{
					arr.push(e.id)
				})
				await OmsCartItemController.delete(arr).then(res => {
					if (res.data.code == 200) {
						this.dataList = [];
						this.list();
					}
				}).catch(err => {
					console.log(err)
				})
				

			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200)
		},
		onPullDownRefresh: function() {
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false
			uni.stopPullDownRefresh()
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 4) {
				this.loadding = false;
				this.pullUpOn = false
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.loadding = false
			}
		},
		onNavigationBarButtonTap(e) {
			this.isEdit = !this.isEdit;
			let text = this.isEdit ? "完成" : "编辑";
			// #ifdef APP-PLUS
			let webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewButtonStyle(0, {
				text: text
			});
			// #endif
		}
	}
</script>

<style>
	.container {
		padding-bottom: 120rpx;
	}

	.tui-mtop {
		margin-top: 24rpx;
	}

	.tui-edit-goods {
		width: 100%;
		border-radius: 12rpx;
		overflow: hidden;
		padding: 24rpx 30rpx 0 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: #333;
		font-size: 24rpx;
	}

	.tui-goods-num {
		font-weight: bold;
		color: #e41f19;
	}

	.tui-cart-cell {
		width: 100%;
		border-radius: 12rpx;
		background: #FFFFFF;
		padding: 40rpx 0;
		overflow: hidden;
	}

	.tui-goods-item {
		display: flex;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-checkbox {
		min-width: 70rpx;
		display: flex;
		align-items: center;
	}

	/* #ifdef MP-WEIXIN */
	.tui-checkbox .wx-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #eb0909;
		width: 44rpx !important;
		height: 44rpx !important;
		border: none;
	}

	/* #endif */
	/* #ifndef MP-WEIXIN */

	>>>.tui-checkbox .uni-checkbox-input {
		width: 40rpx;
		height: 40rpx;
		margin-right: 0 !important;
		border-radius: 50% !important;
		transform: scale(0.8);
		border-color: #d1d1d1 !important;
	}

	>>>.tui-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		background: #eb0909;
		width: 45rpx !important;
		height: 45rpx !important;
		border: none;
	}

	/* #endif */
	.tui-goods-img {
		width: 220rpx;
		height: 220rpx !important;
		border-radius: 12rpx;
		flex-shrink: 0;
		display: block;
	}

	.tui-goods-info {
		width: 100%;
		padding-left: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		box-sizing: border-box;
		overflow: hidden;
	}

	.tui-goods-title {
		white-space: normal;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 24rpx;
		color: #333;
	}

	.tui-goods-model {
		max-width: 100%;
		color: #333;
		background: #F5F5F5;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	.tui-model-text {
		max-width: 100%;
		transform: scale(0.9);
		transform-origin: 0 center;
		font-size: 24rpx;
		line-height: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-price-box {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}

	.tui-goods-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-scale {
		transform: scale(0.8);
		transform-origin: 100% 100%;
	}

	.tui-activity {
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 20rpx 100rpx;
		box-sizing: border-box;
	}

	.tui-buy {
		display: flex;
		align-items: center
	}

	.tui-bold {
		font-weight: bold;
	}

	.tui-sub-info {
		max-width: 532rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 20rpx 30rpx 10rpx 30rpx;
		box-sizing: border-box;
		color: #333;
		transform: scale(0.8);
		transform-origin: 100% center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-left: auto
	}

	.tui-invalid-text {
		width: 66rpx;
		margin-right: 4rpx;
		text-align: center;
		font-size: 24rpx;
		color: #fff;
		background: rgba(0, 0, 0, .3);
		transform: scale(0.8);
		transform-origin: center center;
		border-radius: 4rpx;
		flex-shrink: 0;
	}

	.tui-gray {
		color: #B2B2B2 !important;
	}

	.tui-goods-invalid {
		color: #555;
		font-size: 24rpx;
	}

	.tui-flex-center {
		align-items: center !important;
	}

	.tui-invalid-ptop {
		padding-top: 40rpx;
	}

	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 9999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}

	/*猜你喜欢*/
	.tui-youlike {
		padding-left: 12rpx
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>
<style scoped>
	.login {
		margin-top: 150upx;
	}
</style>
